(function ($) {
    $.fn.slider = function (options) {
        var defaults = {
            moveBox: '.video-list',
            numBox: '.num-wrap'
        };

        var opts = $.extend({}, defaults, options);
        var This = $(this);
        var oMoveBox = This.find(opts.moveBox);
        var oThumbBox = This.find(opts.numBox).find('ul');
        var aThumbEle = oThumbBox.find('li');
        var numW = aThumbEle.innerWidth(); //获取缩略图元素的宽度

        var iNow = 0;
        var bOff = true;

        var aEle = oMoveBox.find('li');
        var w = aEle.innerWidth();
        var len = aEle.length;

        //缩略图宽度与外围的宽度
        aThumbEle.css({width: numW})
        oThumbBox.css({width:numW*(len-1) })

        aEle.css({width: w, 'float': 'left'});
        oMoveBox.css({ width: w*len});

        aThumbEle.on('click', function(){
            iNow = $(this).index();
            if(bOff){
                bOff = false;
                numMoveVrap(iNow);
                oMoveBox.animate({
                    left: -w * iNow
                }, 'slow', function(){
                    bOff = true;
                })
            }
        });

        //缩略图状态函数
        function numMoveVrap (num){
            aThumbEle.removeClass('active');
            aThumbEle.eq(num).addClass('active');

            if(num > 3 && num < len-2){
                oThumbBox.animate({left: '-'+(num-3)*numW});
            }else if(num < len - 5 && num > 0){
                oThumbBox.animate({left: 0});

            }
        }

    };
}(jQuery));